<template>
  <div>
    <el-card class="article">
      <h3>搜索结果</h3>
      <hr>
          <div v-for="item in articleData" :key="item.id">
            <h3>{{ item.title }}</h3>
            <div class="temp">
              {{item.text}}
              </div>
            <el-row type="flex">
              <el-col :span="8" style="margin-top:15px">
                <span> {{item.author == null ? null:"作者:" + item.author }}</span>
              </el-col>
              <el-col :span="8" :push="13">
              <p v-on:click="readAll(item.id)" v-if="item.author != null" style="cursor: pointer; color: #3E88B7;"> 阅读全文</p>
              </el-col>
            </el-row>
            </div>
      </el-card>
  </div>
</template>

<script>
import {htmlToText} from '@/utils/utils'
import {page} from '@/api/article'
import {reallAuthor} from '@/utils/utils'
export default {
  data () {
    return {
      articleData: []
    }
  },
  created () {
    const temp = this.$route.params
    console.log(temp);
     page(temp).then(async (res)=>{
        var tempArr = res.data.data.data
        if(tempArr.length < 1){
          this.articleData = [{title:'未找到',text: '' }]
          return
        }
        tempArr.forEach(element => {
          //把集合里每个对象的text转换为纯文本
          element.text = htmlToText(element.text)
          if(element.text.length > 120){
            element.text = element.text.slice(0,119) + '....'
          }else{
            //是否为标点结尾
            const  reg = /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F|\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;
            if(reg.test(element.text.charAt(element.text.length - 1)))
             element.text = element.text.slice(0,-1) + '....' 
          }
        });
         this.articleData = await reallAuthor(tempArr)
      })
  }
}
</script>

<style lang="scss" scoped>

.article {
  width: 40%;
  min-height: 700px;
  background-color: white;
  margin-left: 25%;
}
.temp {
   height: 100px;
   overflow: hidden;
   line-height: 20px;
   max-height: 80px;
}
</style>